<template>
	<view class="content" :style="{ height: windowHeight + 'px' }">
		<view class="step1" v-if="!bottomShow && !step">
			<image class="image" src="../../static/img/tabbar/ai.png" alt=""></image>
			<view class="title">正在准备练习题...</view>
			<view class="people">每日练习50题</view>
			<view class="people">今日已有100人练习过</view>
		</view>
		<view class="stpes_top" v-if="!bottomShow && step">
			<view class="stpes_top_title">完成{{ total }}题后，可查看答案</view>
			<view class="stpes_top_title">{{ step + '/' + total }}</view>
			<view class="per" :style="{ width: ((step - 1) / total) * 100 + '%' }"></view>
		</view>

		<view class="contents" v-if="!bottomShow && step">
			<view class="title">
				[ 主观题 ] - [ {{ list[step - 1].type }} ]
			</view>
			<view class="label">
				{{ step }}.{{ list[step - 1].name }}
			</view>
			<!-- 单选 多选 判断 -->
			<view class="value"
				v-if="list[step - 1].type == '单选' || list[step - 1].type == '多选' || list[step - 1].type == '判断'">
				<view class="div_view" v-for="(item, index) in list[step - 1].answer" :key="index"
					@click="() => { radioClick(optionList[index], list[step - 1].max, list[step - 1].type) }"
					:style="{ backgroundColor: conputedColor(optionList[index]) }">
					<view class="value_option">
						{{ optionList[index] }}
					</view>
					<view class="titles">
						{{ item }}
					</view>
				</view>
			</view>
			<!-- 简答 -->
			<view class="value" v-if="list[step - 1].type == '简答'">
				<u--textarea height="180" placeholder="请输入答案" maxlength="-1" @input="inputChange"></u--textarea>
			</view>

			<view class="buttons" @click="submit">
				下一题
			</view>

		</view>

		<view class="step1" v-if="bottomShow">
			<view class="step1_per">
				{{ number }}%
			</view>
			<view class="step1_lv">
				正确率
			</view>
			<view class="step1_line">
				<view class="step1_line_active" :style="{ width: number + '%' }">

				</view>
			</view>
			<view class="step1_div">
				<view class="step1_div_items" v-for="(item, index) in itemsList" :key="index">
					<view class="value">{{ item.value }}</view>
					<view class="label">{{ item.label }}</view>
				</view>
			</view>
			<view class="step1_title">
				优秀的人总能看到比自己更好的，而平庸的人总能看到比自己更差的
			</view>
			<view class="buttons_div">
				<view class="step1_button" @click="gotos">
					我要纠错
				</view>
				<!-- <view class="step1_buttons">
					查看答案解析
				</view> -->
				<view class="step1_buttons" @click="goHome">
					完成
				</view>
			</view>
		</view>

		<!-- 我要纠错 -->
		<u-popup :show="activeShow" mode="center" :round="30">
			<view class="active_pop">
				<view class="clsoe">
					<u-icon name="close-circle" color="#000" size="50" @click="activeShow = false"></u-icon>
				</view>
				<view class="title line">
					纠错原因
				</view>
				<u--form :model="model1" :rules="rules" ref="uForm">
					<u-form-item prop="name" @click="showType = true;">
						<u--input v-model="model1.name" disabled placeholder="请选择错题标题" suffixIcon="arrow-down"
							suffixIconStyle="rgb(172, 172, 172)"></u--input>
					</u-form-item>
					<u-form-item prop="reason">
						<u--textarea v-model="model1.reason" maxlength="-1" clearable placeholder="请输入错误原因"
							height="160"></u--textarea>
					</u-form-item>
				</u--form>
				<view class="buttons" @click="submits">
					我要纠错
				</view>
			</view>
		</u-popup>
		<!-- 错题标题 -->
		<u-picker keyName="name" @confirm="confirm($event, '错题标题')" closeOnClickOverlay title="错题标题" :show="showType"
			:columns="typeColumns" @close="showType = false" @cancel="showType = false"></u-picker>
	</view>
</template>

<script>
	import {
		systemInfo
	} from '../../utils/mixin'
	import {
		practiceList,
		finishPractice,
		djjError
	} from '@/api/index.js'
	export default {
		components: {},
		mixins: [systemInfo],
		data() {
			return {
				list: [{
						type: '填空',
						question: '恐龙生活在什么年代填空',
					},
					{
						type: '单选',
						question: '恐龙生活在什么年代',
						answer: ['远古', '侏罗纪', '太古纪', '上古时代'],
						max: 1
					},
					{
						type: '多选',
						question: '恐龙生活在什么年代多选',
						answer: ['远古', '侏罗纪', '太古纪', '上古时代'],
						max: 3
					},
				],
				optionList: [
					'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'
				],
				step: 1,
				total: 0,
				// 作答答案
				answerList: [],
				bottomShow: false,
				number: 0,
				itemsList: [{
						label: '错误题数',
						value: 54
					},
					{
						label: '正确题数',
						value: 21
					},
					{
						label: '累计做题',
						value: 100
					},
				],
				activeShow: false,
				typeColumns: [],
				model1: {
					name: '',
					reason: ''
				},
				rules: {
					name: [{
						type: 'string',
						required: true,
						message: '请选择错题标题',
						trigger: ['blur', 'change']
					}],
					reason: [{
						type: 'string',
						required: true,
						message: '请输入错误原因',
						trigger: ['blur', 'change']
					}]
				},
				showType: false
			}
		},
		onLoad() {
			// 状态栏高度
			this.getSystemInfo();
		},
		onShow() {
			// 获取所有题目
			this.getpracticeList();

		},
		methods: {
			conputedColor(item) {
				return this.answerList[this.step - 1].includes(item) ? 'rgb(233,241,244)' : ''
			},
			// 获取所有练习题目
			async getpracticeList() {
				const res = await practiceList()
				res.rows.forEach((item) => {
					item.value = item.id
					if (item.type == '单选' || item.type == '多选') {
						item.answer = [item.optionA, item.optionB, item.optionC, item.optionD]
						if (item.type == '单选') {
							item.max = 1
						}
						if (item.type == '多选') {
							item.max = 4
						}
					} else if (item.type == '判断') {
						item.answer = ['正确', '错误']
						item.max = 1
					}
				})
				this.typeColumns = [res.rows]
				this.list = res.rows
				this.answerList = new Array(res.total).fill([])
				this.total = res.total
			},
			// 单选事件
			radioClick(item, max, type) {
				// 再次点击取消
				if (this.answerList[this.step - 1].includes(item)) {
					const list = JSON.parse(JSON.stringify(this.answerList[this.step - 1]))
					const indexs = list.indexOf(item)
					list.splice(indexs, 1)
					this.answerList.splice(this.step - 1, 1, list)
				} else {
					// 选择的最大阈值
					if (this.answerList[this.step - 1].length < max) {
						const list = JSON.parse(JSON.stringify(this.answerList[this.step - 1]))
						list.push(item)
						this.answerList.splice(this.step - 1, 1, list)
					}
				}
			},
			// 输入框事件
			inputChange(e) {
				this.answerList.splice(this.step - 1, 1, e)
			},
			// 下一题
			async submit() {
				// 不是最后一题的时候
				if (this.step != this.total) {
					// 有选项的时候
					if (this.answerList[this.step - 1].length > 0) {
						this.step = this.step + 1
					}
				} else {
					const list = []
					this.answerList.forEach((item, index) => {
						list.push({
							codeId: this.list[index].codeId,
							questionId: this.list[index].id,
							userAnswer: this.list[index].type == '判断' ? (item.join(',') == 'A' ? '正确' :
								'错误') : this.list[index].type == '简答' ? item : item.join(',')
						})
					})
					const res = await finishPractice(list)
					this.itemsList[0].value = res.data.incorrectNum
					this.itemsList[1].value = res.data.correctNum
					this.itemsList[2].value = res.data.questionNum
					this.number = Math.floor(res.data.correctNum / res.data.questionNum * 100)
					this.bottomShow = true
				}
			},
			// 纠错
			submits() {
				this.$refs.uForm.validate().then(async (valid) => {
					if (valid) {
						const res = await djjError(this.model1)
						uni.$u.toast('提交成功')
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/tabbar/home/home",
								success: function(e) {
									uni.$emit('goon')
								}
							})
						}, 1000)
					}
				})
			},
			// 查看竞赛
			gotos() {
				this.activeShow = true
			},
			//弹出框确定按钮
			confirm(value, name) {
				if (name == "错题标题") {
					this.model1.name = value.value[0]?.name;
					this.model1.questionId = value.value[0]?.value;
					this.showType = false
				}
			},
			// 返回首页
			goHome() {
				uni.switchTab({
					url: '/pages/tabbar/home/home',
					success: function(e) {
						uni.$emit('goon')
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: rgb(245, 245, 245);
		width: 100%;
		box-sizing: border-box;

		/deep/.u-form {
			margin-top: 20rpx !important;
		}

		/deep/.u-form-item__body__right__content__slot {
			background-color: #fff !important;
		}

		/deep/.u-input__content__field-wrapper__field {
			background-color: #fff !important;
		}

		/deep/.u-input {
			background-color: #fff !important;
		}

		/deep/.u-form-item__body__right__content {
			background-color: #fff !important;
		}

		.active_pop {
			position: relative;
			width: 670rpx;
			min-height: 470rpx;
			box-sizing: border-box;
			padding: 20rpx 80rpx;

			.title {
				text-align: center;
				width: 100%;
				height: 70rpx;
				line-height: 70rpx;
			}

			.clsoe {
				position: absolute;
				z-index: 2;
				right: 20rpx;
				top: 20rpx;

				image {
					width: 48rpx;
					height: 48rpx;
				}
			}

			.buttons {
				margin: 50rpx auto 0;
				width: 300rpx;
				height: 80rpx;
				background-color: rgba(34, 175, 229);
				color: #fff;
				line-height: 80rpx;
				text-align: center;
				font-size: 36rpx;
				border-radius: 10rpx;
				letter-spacing: 20rpx;
			}
		}

		.step1 {
			padding-top: 200rpx;
			box-sizing: border-box;
			text-align: center;

			.image {
				width: 190rpx;
				height: 190rpx;
			}

			.title {
				margin-top: 20rpx;
			}



			.people {
				width: 300rpx;
				margin-top: 20rpx;
				color: rgb(179, 173, 173);
				font-size: 30rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}

			.step1_contents {
				position: relative;
				width: 300rpx;
				/* 六边形的宽度 */
				height: 180rpx;
				/* 六边形的高度 */
				margin: 50rpx auto;
				text-align: center;
				line-height: 180rpx;
				font-size: 180rpx;
				font-weight: 800;
				color: rgb(227, 227, 227);

				.tops {
					width: 0;
					height: 0;
					border-left: 150rpx solid transparent;
					border-right: 150rpx solid transparent;
					border-bottom: 75rpx solid;
					position: absolute;
					top: -75rpx;
				}

				.bottom {
					width: 0;
					height: 0;
					border-left: 150rpx solid transparent;
					border-right: 150rpx solid transparent;
					border-top: 75rpx solid;
					position: absolute;
					top: 180rpx;
				}

			}

			.step1_per {
				margin-top: 60rpx;
				font-size: 50rpx;
				text-align: center;
			}

			.step1_lv {
				font-size: 22rpx;
				margin-top: 10rpx;
				color: rgb(179, 173, 173);
				text-align: center;
			}

			.step1_line {
				width: 70%;
				height: 6rpx;
				margin-top: 10rpx;
				border-radius: 3rpx;
				background-color: rgb(179, 173, 173);
				margin-left: 15%;
				position: relative;

				.step1_line_active {
					position: absolute;
					left: 0;
					top: 0;
					background-color: rgb(84, 192, 228);
					height: 6rpx;
				}
			}

			.step1_div {
				width: 70%;
				margin-top: 50rpx;
				margin-left: 15%;
				background-color: rgb(240, 240, 240);
				height: 140rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 24rpx;
				line-height: 2;
				color: rgb(151, 151, 151);

				.step1_div_items {}
			}

			.step1_title {
				margin-top: 120rpx;
				text-align: center;
				width: 400rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}

			.buttons_div {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 80rpx;

				.step1_buttons {
					width: 220rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
					background-color: rgb(34, 175, 229);
					font-size: 28rpx;
					border-radius: 6rpx;
					margin-left: 20rpx;
				}

				.step1_button {
					width: 220rpx;
					height: 70rpx;
					text-align: center;
					line-height: 70rpx;
					color: #fff;
					background-color: #000;
					font-size: 28rpx;
					border-radius: 6rpx;
				}
			}

		}

		.contents {
			box-sizing: border-box;
			padding: 0 40rpx;
			height: calc(100% - 150rpx);
			overflow: auto;

			.title {
				color: #03a9f4;
				margin-top: 80rpx;
				font-size: 30rpx;
			}

			.label {
				font-weight: 500;
				font-size: 36rpx;
				margin-top: 80rpx;
			}

			/deep/.u-textarea {
				margin-top: 80rpx;
			}

			.value {
				display: flex;
				width: 100%;
				align-items: center;
				font-size: 36rpx;
				box-sizing: border-box;
				flex-wrap: wrap;

				.value_option {
					margin-right: 40rpx;
					border: 1px solid;
					width: 34rpx;
					height: 34rpx;
					font-size: 32rpx;
					text-align: center;
					line-height: 34rpx;
					background-color: #fff;
					border-radius: 50%;
					margin-left: 40rpx;
				}

				.titles {
					width: calc(100% - 34rpx);
				}

				.div_view {
					width: 100%;
					display: flex;
					align-items: center;
					min-height: 60rpx;
					margin-top: 40rpx;
				}
			}



		}

		.buttons {
			margin: 100rpx auto 0;
			width: 400rpx;
			height: 80rpx;
			background-color: rgba(34, 175, 229);
			color: #fff;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			border-radius: 10rpx;
			letter-spacing: 20rpx;
		}

		.stpes_top {
			width: 100%;
			height: 70rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			font-weight: 500;
			box-sizing: border-box;
			padding: 0 40rpx;
			position: relative;

			.stpes_top_title {
				position: relative;
				z-index: 2;
			}

			.per {
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
				height: 100%;
				background-color: rgb(159, 219, 255);
			}
		}
	}
</style>